<script setup lang="ts">
import { useRouter } from 'vue-router'

/**
// 封装需求❓：
   1. 支持 title rightText 属性 =》父传子
   2. 支持 click-right 事件 => 子传父
   3. click-left函数内支持返回上一页或默认首页
 * 
 */
const props = defineProps<{
  title?: string // 中间显示的文字
  rightText?: string // 右边显示的文字
  back?: () => void // 返回函数（自定义返回的逻辑）
}>()

const emit = defineEmits<{
  (e: 'click-right'): void
}>()
// 说明：router === this.$router
const router = useRouter()
const onClickLeft = () => {
  // 点击左侧箭头图标执行
  if (props.back) {
    // 如果传入了back函数，就优先执行back函数
    return props.back()
  }

  console.log('点击左侧箭头图标执行')
  // 说明：window.history 获取路由堆栈信息
  if (history.state.back) {
    // 有上次访问的页面=>返回
    router.back()
  } else {
    // 没有跳回首页
    router.push('/home')
  }
}
const onClickRight = () => {
  // 点击右边文字执行
  console.log('点击右边文字执行')
  emit('click-right')
}
</script>

<template>
  <van-nav-bar
    left-arrow
    @click-left="onClickLeft"
    fixed
    :title="title"
    :right-text="rightText"
    @click-right="onClickRight"
  ></van-nav-bar>
</template>

<style lang="scss" scoped>
/**
 深度作用选择符=》覆盖子组件样式
  vue2: /deep/
  vue3: ::v-deep() {  里边放覆盖的样式 }
 */
::v-deep() {
  .van-nav-bar {
    // 说明：&__arrow === van-nav-bar__arrow
    &__arrow {
      font-size: 18px;
      color: var(--cp-text1);
    }
    &__text {
      font-size: 15px;
    }
  }
}
</style>
